{extend name="public/baseLayuimini"}
{block name="title"}{/block}
{block name="css"}{/block}
{block name="main"}
<div class="layuimini-container">
    <div class="layuimini-main">
        <blockquote class="layui-elem-quote">
            首页展示的栏目管理<br>
        </blockquote>
        <div>
            <div class="layui-btn-group">
                <button class="layui-btn layui-btn-normal" id="btn-expand">展开</button>
                <button class="layui-btn layui-btn-normal" id="btn-fold">折叠</button>
                <button class="layui-btn layui-btn-normal" id="add">新增</button>
            </div>
            <table id="table" class="layui-table" lay-filter="table"></table>
        </div>
    </div>
</div>
{/block}
{block name="js"}
<script src="__LAYUIMINI__/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script type="text/html" id="auth-state">

    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="addChild">子菜单</a>
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="content">内容</a>
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
    layui.use(['table', 'treetable','layer','miniTab'], function () {
        var $ = layui.jquery,
                table = layui.table,
                treetable = layui.treetable,
                layer = layui.layer,
                miniTab = layui.miniTab,
            cols = [
                {type: 'numbers'},
                {field: 'title', minWidth: 200, title: '栏目名称'},
                {field: 'english', title: '英文名称'},
                {field: 'sort', title: '排序',width: 60},
                {field: 'keyword', title: '关键字',width: 120},
                {field: 'img', title: '缩略图',width: 150,templet:function(d){
                        return d.img && `<img src="${d.img}" style="width: 100%;">`
                    }},
                {field: 'seo_title',  align: 'center', title: 'SEO标题'},
                {field: 'url', width: 80, align: 'center', title: '地址'},
                {field: 'drop', width: 80, align: 'center', title: '下拉', templet: function(d){
                        return (d.drop == 1 ? '是':'否')
                    }},
                {field: 'show', width: 80, align: 'center', title: '显示', templet: (d)=>{return (d.show == 1 ? '是' : '否')}},
                {templet: '#auth-state', width: 240, align: 'center', title: '操作'}
            ];
        // 渲染表格
        var insTb = treetable.render({
            treeColIndex: 1,
            treeSpid: 0,
            treeIdName:'id',
            treePidName:'pid',
            treeDefaultClose:false,
            treeLinkage:true,
            elem: '#table',
            url: '/admin/column',
            page: false,
            cols: [cols],
            arrowType:'arrow1',
        });
        $('#btn-expand').click(function () {
            treetable.expandAll('#table');
        });
        $('#btn-fold').click(function () {
            treetable.foldAll('#table');
        });
        $("#add").click(function(){
            miniTab.openNewTabByIframe({
                href:"/admin/editColumn",
                title:"新增栏目",
            });
        })
        //监听工具条
        table.on('tool(table)', function (obj) {
            var data = obj.data;
            var layEvent = obj.event;
            if (layEvent === 'del') {
                layer.confirm('该栏目及以下的子栏目和文章将全部删除,请谨慎操作!!!',function(index){
                    $.get('/admin/delColumn',{id:data.id},res=>{
                        treetable.render({
                            treeColIndex: 1,
                            treeSpid: 0,
                            treeIdName:'id',
                            treePidName:'pid',
                            treeDefaultClose:false,
                            treeLinkage:true,
                            elem: '#table',
                            url: '/admin/column',
                            page: false,
                            cols: [cols],
                        });
                        layer.close(index)
                    })
                })
            } else if (layEvent === 'edit') {
                miniTab.openNewTabByIframe({
                    href:"/admin/editColumn?id="+data.id,
                    title:"修改栏目",
                });
            }else if(layEvent === 'addChild'){
                miniTab.openNewTabByIframe({
                    href:"/admin/editColumn?pid="+data.id,
                    title:"添加子栏目",
                });
            }else if(layEvent === 'content'){
                miniTab.openNewTabByIframe({
                    href:"/admin/article?column_id="+data.id,
                    title:"文章管理",
                });
            }
        });
    });
</script>
{/block}